import React from 'react'
import { Link } from 'react-router-dom';
import { Empty } from 'antd-mobile'
import './Goods.less'
import { imgPre } from '../../../../request/http'

export default function Goods(props) {
  // console.log(props)
  // 1.取数据
  var arr = ["综合推荐", "销量", "折扣", "季节"];
  let { goods, n, changeN } = props;
  return (
    <div className='goods'>
      <div className='nav'>
        {/*2. 选项卡 */}
        {arr.map((item, index) => {
          return <span className={n == index ? 'active' : ''} key={item} onClick={() => changeN(index)}>{item}</span>

        })}
      </div>
      {/* 3.对应展示的内容区域 */}
      {goods.length > 0 ?
        <>
          {goods[n].content.map((item, index) => {
            return <Link to={'/detail/1/' + item.id} className='item' key={item.id}>
              <div className='left'>
                <img src={imgPre + item.img} alt="" />
              </div>
              <div className='right'>
                <h3>{item.goodsname}</h3>
                <div><span>{'￥' + item.price}</span><i>{'￥' + item.market_price}</i></div>
                <p>{item.description}</p>
              </div>
            </Link>
          })}
        </> : <Empty description='暂无数据' />}
    </div>
  )
}
